<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="true" name="HandheldFriendly">
    <title></title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link href="/web/css/normalize.css" rel="stylesheet" type="text/css"/>
    <link href="/web/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/web/css/animate.css" rel="stylesheet" type="text/css"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/web/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="contain">
        <div class="sidebar" id="head">

        </div>
        <section>
            <div class="right_h" id="right_h">

            </div>
            <div class="qulicklink">
                <ul>
                    <li><a href="javascript:;"></a></li>
                    <li><a href="javascript:;"><span>企业首页</span><img src="/web/images/close.png"></a></li>
                    <li class="dq"><a href="javascript:;"><span>业务管理</span><img src="/web/images/close.png"></a></li>
                    <li><a href="javascript:;"></a></li>
                </ul>
            </div>
            <div class="breadcrumbs">
                <ul>
                    <li>系统设置</li>
                    <li>部门列表</li>
                </ul>
            </div>
            <div class="clearfix"></div>
            <div class="content">
                <div class="addbtn" v-if="sum1(66)">
                    <a @click="addbtnClick()" href="javascript:;">新增</a>
                </div>
                <div class="deletebtn" v-if="sum1(68)">
                    <a @click="deleteAllClick()" href="javascript:;">删除</a>
                </div>
                <div class="adSearchbtn" v-if="sum1(1101)">
                    <a @click="adSearchbtnClick()" href="javascript:;">高级搜索</a>
                </div>
                <!-- 这里是新增编辑弹出框开始-->
                <div class="addCharacter addParameter hidden">
                    <div class="addtitle">基本信息</div>
                    <div class="layerbody">
                        <label>
                            <span>职位名称:</span> <input class="zwname" name="resetTc" placeholder="请输入职位名称" type="text" autocomplete="off" />
                        </label>
                        <label>
                            <span>状态:</span>
                            <input class="radio" name="status" type="radio" v-model="status" value="1"/>有效
                            <input class="radio" name="status" type="radio" v-model="status" value="2"> 无效
                        </label>
                    </div>
                    <div class="btns_p">
                        <button @click="addsureBtn()" class="surebtn" type="submit">确认</button>
                        <button @click="addresetBtn()" class="resetbtn" type="submit">重置</button>
                    </div>
                    <input id="editorId" type="hidden" value=""/>
                </div>
                <!-- 这里是新增编辑弹出框结束-->

                <!--高级搜索下拉框开始-->
                <div class="searchBox">
                    <div class="searchKey">
                        <label>
                            <span>职位名称:</span> <input id="serachtitle" name="resetval" placeholder="请输入职位名称"
                                                      type="text"/>
                        </label>
                        <label>
                            <span>创建人:</span>
                            <div class="layui-input-block">
                                <select id="serachauthor" lay-filter="batch" lay-search="required"
                                        lay-verify="required" name="resetval">
                                    <option class="promptColor" value="0">请选择创建人</option>
                                    <option :value="v.realname" v-for="(v,k) in ajaxData.user">{{v.realname}}</option>
                                </select>
                            </div>
                        </label>
                        <label>
                            <span>状态:</span>
                            <span class="status"><input checked class="radio" name="status" type="radio" value="1"/> 有效</span>
                            <span class="status"><input class="radio" name="status" type="radio" value="2"> 无效</span>
                        </label>
                    </div>
                    <div class="btns">
                        <div class="addbtn searchbtn">
                            <a @click="searchbtnClick()" href="javascript:;">搜索</a>
                        </div>
                        <div class="addbtn setbtn">
                            <a @click="resetbtnClick()" href="javascript:;">重置</a>
                        </div>
                    </div>
                </div>
                <!--高级搜索下拉框结束-->

                <div class="search">
                    <!--模糊查询开始-->
                    <label>
                        <span>职位名称:</span>
                        <div class="searchbox">
                            <input @input="search($event,'character','title')" placeholder="请输入您要搜索的职位" type="text">
                        </div>
                    </label>
                    <!--模糊查询结束-->
                </div>
            </div>
            <div class="t_body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th><input @click="deleteCheckAll()" class="checkboxAll" id="deleteCheckAll"
                                       type="checkbox"> 全选
                            </th>
<!--                            <th>序号</th>-->
                            <th>职位名称</th>
                            <th>状态</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>更新人</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr :key="index" @dblclick="editorClick(v.id)" v-for="(v,index) in tableDataList">
                            <td><input :id="'listcheck' + (v.id)" class="selectCheck" type="checkbox"></td>
<!--                            <td>{{(parseInt(index) + 1)}}</td>-->
                            <td>{{v.title}}</td>
                            <td style="color: #f00" v-if="v.status == 2">无效</td>
                            <td style="color: #31c37a" v-else>有效</td>
                            <td>{{v.author}}</td>
                            <td>{{v.createtime}}</td>
                            <td>{{v.updateauthor}}</td>
                            <td>{{v.updatetime}}</td>
                            <td>
                                <div class="editorlist" v-if="sum1(73)">
                                    <a @click="editorListClick(v.id)" href="javascript:;">
                                        <img src="images/editorlist.png">
                                    </a>
                                    <span>职位权限菜单</span>
                                </div>
                                <div class="editor" v-if="sum1(67)">
                                    <a @click="editorClick(v.id)" href="javascript:;">
                                        <img src="images/editor.png">
                                    </a>
                                    <span>编辑</span>
                                </div>
                                <div class="deletes" v-if="sum1(68)">
                                    <a @click="deletesClick(v.id)" href="javascript:;">
                                        <img src="images/deletes.png">
                                    </a>
                                    <span>删除</span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!---------------------------分页start----------------------------->
                <div class="pageFen" v-if="totalNum>1">
                    <ul>
                        <li>
                            <a @click="setPage(curNum-1)" class="pageLink" href="#">上一页</a>
                        </li>
                        <li v-for="n in totalNum">
                            <a class="pageLink curNum" v-if="n == curNum" v-text="n"></a>
                            <a @click="setPage(n)" class="pageLink" href="javascript:;" v-else v-text="n"></a>
                        </li>
                        <li><a @click="setPage(curNum+1)" class="pageLink" href="#">下一页</a></li>
                    </ul>
                </div>
                <!---------------------------分页end-------------------------------->
            </div>
            <div class="add_show_div hidden">
                <div class="t_body t_body1">
                    <table class="table">
                        <thead>
                        <tr>
                            <th><input @click="checkboxAll()" class="checkboxAll" id="checkAll" type="checkbox"> 全选</th>
                            <th style="text-align: left">菜单名称</th>
                            <th></th>
                        </tr>
                        </thead>
                        <input id="layid" type="hidden" value="">
                        <tbody :key="index" v-for="(item,index) in jurisdictionDataObj">
                        <tr>
                            <td v-if="sum(item.id)"><input :id="'checkbox' + (item.id)" :value="(item.id)"
                                                           @click="checkboxCheck(item.id)" checked
                                                           class="fatherCheck" type="checkbox">
                            </td>
                            <td v-else><input :id="'checkbox' + (item.id)" :value="(item.id)"
                                              @click="checkboxCheck(item.id)"
                                              class="fatherCheck" type="checkbox"></td>
                            <td>
                                <div class="editorname"><a href="javascript:;">{{item.title}}</a></div>
                            </td>
                            <td></td>
                        </tr>
                        <tr v-for="(item1,index) in item.children">
                            <td></td>
                            <td class="childs">
                                <input :id="'checkbox' + (item1.id)" :value="(item1.id)" @click="checkboxCheck(item1.id)"
                                       checked
                                       class="sonCheck" type="checkbox" v-if="sum(item1.id)"/>
                                <input :id="'checkbox' + (item1.id)" :value="(item1.id)" @click="checkboxCheck(item1.id)"
                                       class="sonCheck"
                                       type="checkbox" v-else/>
                                {{item1.title}}
                            </td>
                            <td>
                                <ul>
                                    <li v-for="(item2,index) in item1.children">
                                        <input :id="'checkbox' + (item2.id)" :value="(item2.id)" @click="checkboxCheck(item2.id)"
                                               checked
                                               class="sonsCheck"
                                               type="checkbox" v-if="sum(item2.id)"/>
                                        <input :id="'checkbox' + (item2.id)" :value="(item2.id)" @click="checkboxCheck(item2.id)"
                                               class="sonsCheck"
                                               type="checkbox"
                                               v-else/>
                                        {{item2.title}}
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="clearfix"></div>
                    <div class="tabBottom">
                        <button @click="sureBtn()" class="surebtn" type="submit">确认</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<script src="/web/layui/layui.js"></script>
<script src="/web/js/jquery-1.10.0.min.js"></script>
<script src="/web/js/vue.js"></script>
<script src="/web/js/transform.js"></script>
<script>
    AppData = new Vue({
        el: '#app',
        data: {
            tableData: {},
            categoryIndex: 0,
            show: false,
            tableDataList: {},
            jurisdictionDataObj: {},
            dataList: {},
            dataList1: {},
            checkList: {},
            map: {},
            ajaxData: [],
            checkVal: [],
            status: 1,
            totalNum: 0, //总页数
            listRows: 9, //每页数量
            curNum: 1 //当前页码
        },
        mounted() {
            $("#head").load("header.html");
            $("#right_h").load("right.html");
            this.getIndexData();
        },
        methods: {
            verification(data) {
                if (data.status == 2) {
                    layer.msg(data.message, {icon: 2, time: 1000}, function () {
                        window.location.href = "login.html";
                    });
                }
            },
            addbtnClick() {
                $('#editorId').val('');
                $('.zwname').val('');
                layeraddoredit = layer.open({
                    type: 1,
                    title: '新增菜单',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['900px', '600px'],
                    content: $('.addCharacter'),
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.addCharacter').hide();
                    }
                })
            },
            addsureBtn() {
                let title = $('.zwname').val();
                let status = $('input[name="status"]:checked').val();
                if (!title) { //非空判断
                    layer.msg('请输入要添加的职位', {icon: 2});
                    return false;
                }
                let editorId = $('#editorId').val();
                if (editorId) {
                    $.ajax({
                        type: "PUT",
                        dataType: "json",
                        url: '/character/' + editorId,
                        data: {'title': title, 'status': status},
                        success: function (data) {
                            console.log(data);
                            AppData.verification(data);
                            if (data.status == 1) {
                                layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                    AppData.getIndexData();
                                    layer.close(layeraddoredit);
                                });
                            } else {
                                layer.msg(data.message, {icon: 2, time: 1000});
                            }
                        },
                        error: function (msg) {
                            console.log(msg);
                        }
                    });
                } else {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: '/character',
                        data: {'title': title, 'status': status},
                        success: function (data) {
                            console.log(data);
                            AppData.verification(data);
                            if (data.status == 1) {
                                layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                    AppData.getIndexData();
                                    layer.close(layeraddoredit);
                                });
                            } else {
                                layer.msg(data.message, {icon: 2, time: 1000});
                            }
                        },
                        error: function (msg) {
                            console.log(msg);
                        }
                    });
                }
            },
            editorClick(edid) {
                $('#editorId').val(edid);
                layeraddoredit = layer.open({
                    type: 1,
                    title: '新增菜单',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['900px', '600px'],
                    content: $('.addCharacter'),
                    success: function () {
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: '/character/' + edid,
                            data: {'id': edid},
                            success: function (data) {
                                AppData.verification(data);
                                $('.zwname').val(data.info.title);
                                AppData.status = data.info.status;
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    },
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.addCharacter').hide();
                    }
                })
            },
            editorListClick(characterid) {
                layer.open({
                    type: 1,
                    title: '职位权限管理菜单',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['900px', '600px'],
                    content: $('.add_show_div'),
                    success: function () {
                        $('#layid').val(characterid);
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: '/character/create',
                            data: {'characterid': characterid},
                            success: function (data) {
                                AppData.verification(data);
                                AppData.checkList = data.jurisdiction;
                                AppData.dataList = data.list;
                                console.log(AppData.dataList);
                                let jurisdictionData = data.jurisdiction;
                                var jurisdictionArr = [];
                                for (let i in jurisdictionData) {
                                    jurisdictionArr.push(jurisdictionData[i]); //属性
                                }
                                /*调用封装的改变数据结构方法*/
                                let jurisdictionDatas = setTreeData(jurisdictionArr);
                                let jurisdictionDataObj = {...jurisdictionDatas};//把转换后的数组通过扩展运算符改成对象便于遍历
                                AppData.jurisdictionDataObj = jurisdictionDataObj;
                                console.log(jurisdictionDataObj);
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    },
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.add_show_div').hide();
                    }
                })
            },
            sum(sumid) {
                for (var i = 0; i < this.dataList.length; i++) {
                    if (sumid == this.dataList[i].id) {
                        return true;
                    }
                }
                return false;
            },
            sum1(sumid) {
                for (var i in this.dataList1) {
                    if (sumid == this.dataList1[i].id) {
                        return true;
                    }
                }
                return false;
            },
            checkboxAll() {
                let checkBoxs = AppData.checkList;
                if ($('#checkAll').is(":checked")) {
                    for (let j in checkBoxs) {
                        $('#checkbox' + checkBoxs[j].id).prop('checked', true);
                    }
                } else {
                    for (let j in checkBoxs) {
                        $('#checkbox' + checkBoxs[j].id).prop('checked', false);
                    }
                }
            },
            checkboxCheck(itemid) {
                let checkBoxs = AppData.checkList;
                if ($('#checkbox' + itemid).is(":checked")) {
                    let newobj = {};
                    console.log(itemid);
                    for (let i in checkBoxs) {
                        if (itemid == checkBoxs[i].id) {
                            newobj = checkBoxs[i];
                            break;
                        }
                    }
                    $('#checkbox' + newobj.pid).prop('checked', true);
                    for (let i in checkBoxs) {
                        if (newobj.pid == checkBoxs[i].id) {
                            newobj = checkBoxs[i];
                            break;
                        }
                    }
                    if (newobj) {
                        $('#checkbox' + newobj.pid).prop('checked', true);
                    }
                    for (let i in checkBoxs) {
                        if (itemid == checkBoxs[i].pid) {
                            $('#checkbox' + checkBoxs[i].id).prop('checked', true);
                            for (let j in checkBoxs) {
                                if (checkBoxs[i].id == checkBoxs[j].pid) {
                                    $('#checkbox' + checkBoxs[j].id).prop('checked', true);
                                }
                            }
                        }
                    }
                } else {
                    for (let i in checkBoxs) {
                        if (itemid == checkBoxs[i].pid) {
                            $('#checkbox' + checkBoxs[i].id).prop('checked', false);
                            for (let j in checkBoxs) {
                                if (checkBoxs[i].id == checkBoxs[j].pid) {
                                    $('#checkbox' + checkBoxs[j].id).prop('checked', false);
                                }
                            }
                        }
                    }
                }
            },
            sureBtn() {
                let checkBoxs = AppData.checkList;
                for (let i in checkBoxs) {
                    if ($('#checkbox' + checkBoxs[i].id).is(":checked")) {
                        this.checkVal.push(checkBoxs[i].id);
                    }
                }
                console.log(this.checkVal);
                let characterid = $('#layid').val();
                // 下面开始调用接口
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/character/0/edit',
                    data: {'characterid': characterid, 'ids': this.checkVal},
                    success: function (data) {
                        AppData.verification(data);
                        layer.msg(data.message, {icon: 1, time: 2000}, function () {
                            layer.closeAll();
                        });
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });
            },
            deletesClick(deleteid) {
                layui.use('layer', function () {
                    layer.confirm('确认要删除吗？', {
                        btn: ['确定', '取消']//按钮
                    }, function () {
                        let ids = [];
                        ids.push(deleteid);
                        $.ajax({
                            type: "DELETE",
                            dataType: "json",
                            url: '/character/0',
                            data: {'ids': ids},
                            success: function (data) {
                                AppData.verification(data);
                                if (data.status == 1) {
                                    layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                        AppData.getIndexData();
                                    });
                                } else {
                                    layer.msg(data.message, {icon: 2, time: 1000});
                                }
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    });
                });
            },
            deleteCheckAll() {
                let checkBoxs = AppData.tableDataList;
                if ($('#deleteCheckAll').is(":checked")) {
                    for (let j in checkBoxs) {
                        $('#listcheck' + checkBoxs[j].id).prop('checked', true);
                    }
                } else {
                    for (let j in checkBoxs) {
                        $('#listcheck' + checkBoxs[j].id).prop('checked', false);
                    }
                }
            },
            deleteAllClick() {
                layui.use('layer', function () {
                    layer.confirm('确认要删除吗？', {
                        btn: ['确定', '取消']//按钮
                    }, function () {
                        let ids = [];
                        let checkBoxs = AppData.tableDataList;
                        for (let i in checkBoxs) {
                            if ($('#listcheck' + checkBoxs[i].id).is(":checked")) {
                                ids.push(checkBoxs[i].id);
                            }
                        }
                        if (ids.length == 0) {
                            layer.msg('请选择你要删除的选项');
                            return false;
                        }
                        console.log(ids);
                        $.ajax({
                            type: "DELETE",
                            dataType: "json",
                            url: '/character/0',
                            data: {'ids': ids},
                            success: function (data) {
                                console.log(data);
                                AppData.verification(data);
                                if (data.status == 1) {
                                    layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                        AppData.getIndexData();
                                    });
                                } else {
                                    layer.msg(data.message, {icon: 2, time: 1000});
                                }
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    });
                });
            },
            addresetBtn() {
                $('input[name="resetTc"]').val('');
                $('select[name="resetTc"]').val('0');
                $('textarea[name="resetTc"]').val('');
            },
            search(e, table, field) {
                var that = this;
                var keywords = e.target.value;
                this.map.title = keywords;
                this.getIndexData();
            },
            //切换页码
            setPage: function (num) {
                //页码小于等于1
                if (num < 1) {
                    num = 1;
                }
                //页码大于总页数
                if (num > this.totalNum) {
                    num = this.totalNum;
                }
                //页码赋给当前页
                this.curNum = num;
                getIndexData();
            },
            adSearchbtnClick() {//高级搜素按钮点击弹出搜素框
                $('.searchBox').slideToggle();
                $('.search').toggle();
            },
            searchbtnClick() {
                //高级搜素按钮点击弹出搜素框 搜索按钮
                //获取所有搜索关键值
                var map = {
                    title: $('#serachtitle').val(),
                    status: $('input[name="status"]:checked').val(),
                    author: $('#serachauthor').val()
                };
                this.map = map;
                this.getIndexData();
            },
            resetbtnClick() { //重置
                $('input[name="resetval"]').val('');
                $('select[name="resetval"]').val('');
            },
            //首页列表读取
            getIndexData() {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/character',
                    data: {'listRows': this.listRows, 'page': this.curNum, map: this.map},
                    success: function (data) {
                        AppData.verification(data);
                        AppData.ajaxData = data;
                        AppData.dataList1 = data.userInfo.jurisdiction;
                        AppData.totalNum = data.list.last_page;
                        let dataS = data.userInfo.jurisdiction;//后台初始数据
                        var dataArr = [];
                        for (let i in dataS) {
                            dataArr.push(dataS[i]); //属性
                        }
                        /*调用封装的改变数据结构方法*/
                        let tableData = setTreeData(dataArr);
                        let tableDataObj = {...tableData};//把转换后的数组通过扩展运算符改成对象便于遍历
                        AppData.tableData = tableDataObj;
                        //表格中数据的渲染
                        let tableList = {...data.list.data};
                        //转换时间戳为具体的年月日
                        let dataObj = data.list.data;
                        for (var i = 0; i < dataObj.length; i++) {
                            var dataObj1 = dataObj[i].createtime;
                            var dataObj2 = dataObj[i].updatetime;
                            var date = new Date(dataObj1 * 1000);
                            dataObj[i].createtime = date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' + date.getDate() + ' ';
                            /*更新*/
                            var date1 = new Date(dataObj2 * 1000);
                            dataObj[i].updatetime = date1.getFullYear() + '-' + (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1) + '-' + date1.getDate() + ' ';
                        }
                        AppData.tableDataList = tableList;
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });
            }
        }
    })
</script>
</body>
</html>
